<template>
	<view>
		<view class="rent-info white-bg mb-24">
			<view class="title">{{ dataform.title }}</view>
			<view style="color: #A6A6A6;margin-top: 24rpx;">
				<text style="margin-right: 18rpx;">编号：{{dataform.id}}</text>
				<text>更新时间：{{dataform.updateTime}}</text>
			</view>
			<view class="acea-row rent-types pd-t-b-24 border-b">
				<view class="type" v-for="(item,index) in dataform.storeAdvantage" :key="index">{{item}}</view>
			</view>

			<view class="acea-row  pd-t-b-24 row-between">
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle visit-box  row-between  border-b">
					<view class="visit-advtar" @click="toVisitor">
						<image :src="m.avatar" mode=""
							v-for="(m,ind) in dataform.managementResponse?dataform.managementResponse:[]" :key="ind"
							:style="{left: (20 * ind) + 'rpx'}"></image>
					</view>
				</view>
				<view class="acea-row visit-info row-middle">
					<view @click="toVisitor">{{ dataform.view || 0 }}人浏览</view>
					<view>
						{{dataform.communication &&dataform.communication != 0? dataform.communication :randomCom}}人咨询
					</view>
				</view>

				<!-- <view>50人感兴趣</view> -->

				<view class="acea-row row-middle row-right share-btns" style="">
					<button open-type="share">
						<image src="../static/images/wechat_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">微信</view> -->

					</button>
					<button @click="toReport" style="margin-left: 15rpx;">
						<image src="../static/images/report_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">举报</view> -->
					</button>
				</view>
			</view>
		</view>
		<!-- 求租详情 -->
		<view class="module-box white-bg mb-24">
			<view class="module-title" v-if="dataform.status == 0">二手详情</view>
			<view class="module-title" v-else>二手详情</view>
			<view class="acea-row row-middle row-between ">
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">信息类目</view>
					<view class="text">{{dataform.goodCateName?dataform.goodCateName:''}}
						{{dataform.goodCateName&&dataform.categorySonName?'-':''}}
						{{dataform.categorySonName?dataform.categorySonName:''}}
					</view>
				</view>
				<!-- 				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">商品数量</view>
					<view class="text">{{ dataform.product?dataform.products.length : 0 }}</view>
				</view> -->
			</view>
			<view class="acea-row row-middle row-between pd-t-b-24">
				<view class="label">地址</view>
				<view class="text">{{ dataform.address || '' }} </view>
			</view>
		</view>

		<view class="module-box white-bg mb-24">
			<view class="module-title">商品</view>
			<view class="acea-row row-middle row-between ">
				<view class="acea-row goods-list border-b">
					<view class="goods" v-for="(item,index) in dataform.products" :key="index">
						<view class="img" @click="previewImg(item.image?item.image.split(',')[0]:noImageShow)">
							<image :src="item.image?item.image.split(',')[0]:noImageShow" mode=""></image>
						</view>
						<view @click="toProductDetail(item,index)">
							<view class="title line1">{{ item.name}} <span
									v-if="item.productNum&&item.productNum>0">({{item.productNum}})</span> </view>
							<view class="price line1">￥{{item.price}}</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 联系人 -->
		<view class="module-box white-bg mb-24">
			<contacts-list :list="dataform.contacts" :info="dataform"></contacts-list>
		</view>
		<view class="uni-p-b-98"></view>
		<countDown ref="countDown" />
		<report :link-id="dataform.infos" :types="6" ref="report" />
		<detail-footer :contact="dataform" :info="dataform"></detail-footer>
	</view>
</template>

<script>
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import countDown from '@/pages/details/components/countDown.vue'
	import report from "@/pages/details/components/goods_report/report.vue"
	import {
		GroupDetailApi,
		BuyDetailApi
	} from '@/api/subletOfShop.js'
	import matchMixins from '@/mixins/match.js'
	import app from '../../../store/modules/app'
	import {
		getUnusedDetail
	} from '@/api/unused.js'
	export default {
		components: {
			detailFooter,
			contactsList,
			countDown,
			report
		},
		mixins: [matchMixins],
		onLoad(option) {

			this.mind = option.mind ? option.mind : this.mind
			let id = option.id;

			if (option.spread) {
				id = option.id;
				let spreadType = getApp().globalData.spreadType;
				this.shareInfo.shareId = option.spread
				this.shareInfo.infoType = spreadType;


			} else {

			}
			this.detailInfo.storeCategory = option.storeCategory;
			this.shareInfo.infoId = id;
			this.toDetail(id);

		},
		data() {
			return {
				rentTypes: [1, 2, 3],
				dataform: {},
				shareInfo: {
					isInitStatus: 0,
					shareId: '',
					infoId: '',
					infoType: 2,
				},
				randomCom: Math.floor(Math.random() * (500 - 50 + 1)) + 50,
				matchTotal: 0,
				noImageShow: this.$noImageShow,
				mind: '',
				type: 0, //0求租 1求购
				detailInfo: {
					storeCategory: ''
				}
			};
		},
		methods: {
			toDetail(id) {
				if (this.$location && this.$location.latitude && this.$location.longitude) {
					this.getList(id);
				} else {
					setTimeout(() => {
						this.toDetail(id);
					}, 800)
				}
			},
			toMatchPage() {
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/match?data=" + JSON.stringify(
						this.dataform)
				})
			},
			toProductDetail(data) {
				data.contacts = this.dataform.contacts;
				data.phoneExternal = this.dataform.phoneExternal;
				data.contactExternal = this.dataform.contactExternal;
				uni.navigateTo({
					url: '/pages/details/product/index?data=' + JSON.stringify(data)
				})
			},
			//
			async getList(id) {
				uni.showLoading({
					title: "加载中"
				})
				try {
					let {
						data
					} = await getUnusedDetail(id)

					console.log('data--', data)
					this.shareInfo.isInitStatus = 1;
					data.vistype = 2;
					this.dataform = data;
					this.dataform.infos = this.dataform.id;
					if (this.dataform.status == 1) {
						uni.setNavigationBarTitle({
							title: "二手求购"
						});
					}
					uni.hideLoading()
				} catch (e) {
					console.log('报错', e)
					uni.hideLoading()
					//TODO handle the exception
				}
			},
			toReport() {
				this.$refs.report.open();
			},
			previewImg(value) {
				let that = this;
				let imageBox = value.split(",");
				// 预览图片
				uni.previewImage({
					urls: imageBox,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {

						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toVisitor() {
				console.log('--', this.dataform)
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(
						this.dataform)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";

	.rent-info {
		padding: 30rpx;

		.title {
			font-size: 40rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.rent-types {
		.type {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
			padding: 10rpx 36rpx;
			border-radius: 10rpx;
			background: rgba(255, 232, 234, 1);
			margin-right: 28rpx;
		}
	}

	.visit-info {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);

		view {
			margin-right: 24rpx;
		}
	}

	// 商品列表
	.goods-list {
		.goods:nth-child(3n-1) {
			margin: 0 18rpx;
		}

		.goods {
			width: 218rpx;
			margin-bottom: 18rpx;

			.img {
				width: 218rpx;
				height: 172rpx;
				background: #e7e7e7;

				image {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
				}
			}

			.title {
				width: 100%;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}

			.price {
				width: 100%;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(238, 33, 45, 1);
				text-align: center;
			}
		}
	}
</style>